<template>
    <div class="accountsetting">
        <page-title>账户设置</page-title>
        <div class="content-box">
          <div class="img-box">
            <img :src="accountData.avatar?img_host+accountData.avatar:'../../../static/img/default.png'" />
            <div class="img-text"><span @click="uploadPic">上传头像</span>
              <input type="file"
                     ref="uploadbtn"
                     id="doctorAuditing"
                     name="file"
                     @change='addImgEvent'
                     accept="image/png, image/jpeg, image/jpg">
            </div>
          </div> 
          <div class="input-box">
            <span class="item-name">用户名：</span>
            <el-input disabled v-model="accountData.admin_account"></el-input>
          </div>
          <div class="input-box">
            <span class="item-name">Email：</span>
            <el-input disabled v-model="accountData.email"></el-input>
          </div>
          <div class="input-box">
            <span class="item-name">旧密码：</span>
            <el-input v-model="oldPassword" type="password"></el-input>
          </div>
          <div class="input-box">
            <span class="item-name">新密码：</span>
            <el-input v-model="newPassword" type="password"></el-input>
          </div>
          <div class="input-box">
            <span class="item-name">确认密码：</span>
            <el-input v-model="confirmPassword" type="password"></el-input>
          </div>
          <div class="btn-box">
            <el-button type="primary" @click="submit">提交</el-button>
          </div>
        </div>
    </div>
</template>
<script>
import * as api from '../../api/api'
import { Message } from 'element-ui'
export default {
    name: 'accountsetting',
    data () {
        return {
            accountData: {}, //用户信息
            oldPassword: '',
            newPassword: '',
            confirmPassword: '',
            img_host: '',  //图片域名
        }
    },
    created() { 
      var that = this;
      that.img_host = 'http://renqing123.oss-cn-shenzhen.aliyuncs.com/';
      var id = window.sessionStorage.getItem('u_id');
      api.getDataDetail({
        "model": "AdminUsers",
        "condition": {id}
      }).then( res => {
        that.fetchUserData();
      })
    },
    methods: {
        //获取用户信息
        fetchUserData(){
          var that = this;
          var id = window.sessionStorage.getItem('u_id');
          api.getDataDetail({
            "model": "AdminUsers",
            "condition": {id}
          }).then( res => {
            if (res.data.code == 200) {
              that.accountData = res.data.data;
            }
          })
        },
        //提交修改信息
        submit(){
          var that = this;
          if (!that.oldPassword) {
            Message({
                message: '请输入旧密码',
                type: 'info',
                duration: 1000
            });
            return;
          } else if (!that.newPassword) {
            Message({
                message: '请输入新密码',
                type: 'info',
                duration: 1000
            });
            return;
          } else if (!that.confirmPassword) {
            Message({
                message: '请再次输入新密码',
                type: 'info',
                duration: 1000
            });
            return;
          } else if (that.newPassword == that.oldPassword) {
            Message({
                message: '新密码不能和旧密码一样',
                type: 'info',
                duration: 1000
            });
            return;
          } else if (that.newPassword != that.confirmPassword) {
            Message({
                message: '两次输入新密码不一样',
                type: 'info',
                duration: 1000
            });
            return;
          }
          api.createData({
            "model": "AdminUsers",
            "data":{
              admin_password: that.newPassword,
              old_password: that.oldPassword,
              avatar: that.accountData.avatar
            },
            "update_condition":{
              "id": that.accountData.id
            }
          }).then(res => {
            if (res.data.code == 200) {
              Message({
                  message: '修改成功',
                  type: 'success',
                  duration: 1000
              });
            }
          })
        },
        //选择图片
        addImgEvent(){
            var that = this;
            var img1 = event.target.files[0];
            //生成临时图片路径
            var temSrc = URL.createObjectURL(img1);
            //判断图片尺寸大小
            var size = img1.size/1024;
            //小于150k
            // if(size>500){
            //     that.imgUpLoading=false;
            //     Message({
            //       showClose: true,
            //       type: 'error',
            //       message: '图片大小不能大于500KB'
            //     }); 
            //     return false;  
            // };
            //判断图片像素尺寸
            var _img = new Image();
            _img.onload = function  () {
                //that.param.data.avatar = temSrc;
                var formdata = new FormData();
                formdata.append('file', img1);
                api.uploadFile(formdata).then(res => {
                    if (res.data.code == 200) {
                        Message({
                            message: '图片上传成功',
                            type: 'success'
                        });
                        that.accountData.avatar = res.data.data;
                    }
                })
                setTimeout(function  () {
                    URL.revokeObjectURL(temSrc);
                },0);
            }
            _img.src = temSrc;
        },
        //触发选择图片
        uploadPic(){
          var that = this;
          that.$refs.uploadbtn.click();
        }
    },
    components: {

    }
}
</script>
<style>
   .accountsetting .el-input {
     width:200px;
   }
</style>
<style scoped lang="scss">
    .accountsetting {
        background: #ffffff;
        min-height: 100%;
        position: relative;
        box-sizing:border-box;
        color: #666666;
        font-size: 14px;
        #doctorAuditing {
          opacity: 0;
          width:100%;
          height: 100%;
          position: absolute;
          top:0;
          left:0;
          display: none;
        }
        .img-box {
          text-align: center;
          padding-top: 40px;
          padding-bottom: 20px;
          img {
            width:100px;
            height: 100px;
            border-radius: 100%;
          }
          .img-text {
              padding-top: 5px;
              span {
                color:#1ABC9C;
                font-size: 12px;
                cursor: pointer;
              }
          }
            
        }
        .input-box {
          width: 330px;
          margin: 0 auto 10px;
          .item-name {
            width: 100px;
            display: inline-block;
            color: #666666;
            font-size: 12px;
            text-align: right;
            padding-right: 5px;
          }
          .item-name:before {
            content: '*';
            color: #F04844;
          }
        }
        .btn-box{
          text-align: center;
          margin-top: 30px;
        }
    }
</style>
